<template>
    <div class="top_info_content">
        <div class="top_item">
            <div class="item_earth">
                <!-- <img src="../assets/image/earth.png" alt="" srcset=""> -->
                <div class="e-rotate"></div>
            </div>
        </div>
        <div class="top_item">
            <div class="item_top">接入设备</div>
            <div class="item_bottom bot_num" style="">
                <div class="it_bot_left">23</div>
                <div class="it_bot_right">个</div>
            </div>
        </div>
        <div class="top_item">
            <div class="item_top">运行正常</div>
            <div class="item_bottom bot_nor" style="">
                <div class="it_bot_left">16</div>
                <div class="it_bot_right">个</div>
            </div>
        </div>
        <div class="top_item">
            <div class="item_top">设备告警</div>
            <div class="item_bottom bot_ala" style="color:#D24444">
                <div class="it_bot_left">0</div>
                <div class="it_bot_right">个</div>
            </div>
        </div>
        <div class="top_item">
            <div class="item_top">设备预警</div>
            <div class="item_bottom bot_pre" style="color:#FFC400">
                <div class="it_bot_left">0</div>
                <div class="it_bot_right">个</div>
            </div>
        </div>
        <div class="top_item">
            <div class="item_top">设备在线</div>
            <div class="item_bottom bot_onl" style="color:#61D698">
                <div class="it_bot_left">4</div>
                <div class="it_bot_right">个</div>
            </div>
        </div>
        <div class="top_item">
            <div class="item_top">设备离线</div>
            <div class="item_bottom bot_off" style="color:#B1B1B1">
                <div class="it_bot_left">19</div>
                <div class="it_bot_right">个</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {

}
</script>
<style lang="scss" scoped>
.top_info_content {
    width: vw(1813);
    height: vh(131);

    margin-left: vw(53);
    display: flex;
    background: #082173;
    border-radius: 29px 29px 29px 29px;
    opacity: 0.68;

    .top_item {
        width: 1%;
        flex-grow: 1;
        border-right: 1px solid transparent;
        height: vh(131);
        border-image: linear-gradient(180deg, rgba(0, 222, 222, 0) 0%, #00CBFF 54%, rgba(0, 127, 236, 0) 100%);
        -moz-border-image: linear-gradient(180deg, rgba(0, 222, 222, 0) 0%, #00CBFF 54%, rgba(0, 127, 236, 0) 100%);
        -webkit-border-image: linear-gradient(180deg, rgba(0, 222, 222, 0) 0%, #00CBFF 54%, rgba(0, 127, 236, 0) 100%);
        border-image-slice: 1;

        .item_top {
            width: 100%;
            height: vh(131*0.4);
            font-size: vh(26);
            text-align: center;
            line-height: vh(131*0.4);
            font-weight: 400;
            color: #FFFFFF;
        }

        .item_bottom {
            width: 100%;
            height: vh(131*0.6);
            display: flex;
            height: vh(131*0.6);
            line-height: vh(131*0.6);


            .it_bot_left {
                width: 70%;
                text-align: right;
                font-size: vh(46);
                font-weight: bold;
            }

            .it_bot_right {
                width: 30%;
                text-align: center;
                font-size: vh(22);
                font-weight: 400;
            }
        }

        .bot_num {
            color: #09A1F9
        }

        .bot_nor {
            color: #44D278
        }

        .bot_ala {}

        .bot_pre {}

        .bot_onl {}

        .bot_off {}
    }

    .top_item:last-child {
        border-right: 0;
    }
}

.item_earth {
    width: vw(122.23);
    height: vh(122.23);
    margin-left: 50%;
    transform: translateX(-50%);

    position: relative;
    border-radius: 50%;
    background-image: url("../assets/image/earth.png");
    background-repeat: no-repeat;
    background-position: center;
    // background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    overflow: hidden;

    .e-rotate::after {
        content: "";
        width: vw(122.23/2);
        height: vh(122.23/2);
        display: block;
        box-sizing: border-box;
        position: relative;
        top: -50%;
        right: -50%;
        transform-origin: 0% 100%;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to right, transparent, #C3FFFF);
        border-image-slice: 5;
        background: transparent;
        background-image: linear-gradient(to right, transparent, #39A8FF);
        animation: rotateAnimate 3s linear infinite;
    }
}

@keyframes rotateAnimate {
    from {
        transform: rotate(0deg) skew(-10deg)
    }

    to {
        transform: rotate(360deg) skew(-10deg)
    }
}
</style>